import { memo } from "react";
import {
  Button,
  Col,
  Row,
  Form,
  Input,
  Select,
  DatePicker,
  Cascader,
} from "antd";
export type IFormconfig = {
  label: string;
  name: string;
  span: number;
  type: string;
  placeholder?: string;
  placeholders?: any[];
  options?: any[];
  rules?: any[];
};
export interface ICoderPFormProps {
  config: IFormconfig[];
  value: any;
  setValue: (val: any) => void;
  searchCallback: () => void;
  resetCallback: () => void;
  children?: any;
}

const { RangePicker } = DatePicker;
const { Option } = Select;
const CoderForm = memo((props: ICoderPFormProps) => {
  const [form] = Form.useForm();
  return (
    <Form preserve={false} form={form}>
      <Row gutter={24}>
        {props.config.map((item) => {
          return (
            <Col span={item.span} key={item.name}>
              <Form.Item
                label={item.label}
                name={item.name}
                labelCol={{ span: 4 }}
              >
                {item.type === "input" ? (
                  <Input
                    allowClear
                    placeholder={item.placeholder}
                    onChange={(event) =>
                      props.setValue({
                        ...props.value,
                        [item.name]: event.currentTarget.value,
                      })
                    }
                  ></Input>
                ) : item.type === "select" ? (
                  <Select
                    placeholder={item.placeholder}
                    onChange={(event) =>
                      props.setValue({ ...props.value, [item.name]: event })
                    }
                  >
                    {item.options?.map((itemy: any) => {
                      return (
                        <Option key={itemy.value} value={itemy.value}>
                          {itemy.label}
                        </Option>
                      );
                    })}
                  </Select>
                ) : item.type === "date" ? (
                  <RangePicker
                    placeholder={item.placeholders as [string, string]}
                    onChange={(d, s) => {
                      props.setValue({
                        ...props.value,
                        [item.name]: s[0].length > 3 ? s.join(",") : null,
                      });
                    }}
                    style={{ width: "100%" }}
                  />
                ) : item.type === "cascader" ? (
                  <Cascader
                    placeholder={item.placeholder}
                    options={item.options}
                    changeOnSelect
                    onChange={(value) => {
                      console.log("type: ", props.value, value);
                      if (value.length > 0) {
                        props.setValue({
                          ...props.value,
                          shop_type: value[0] ?? "",
                          shop_tag: value[1] ?? "",
                        });
                      }
                    }}
                  ></Cascader>
                ) : (
                  <></>
                )}
              </Form.Item>
            </Col>
          );
        })}
      </Row>
      <Row>
        <Col span={24} style={{ textAlign: "right" }}>
          {props.children}
          <Button
            style={{ margin: "0 10px" }}
            onClick={() => {
              props.resetCallback();
              props.setValue({});
              form.resetFields();
            }}
          >
            重置
          </Button>
          <Button type="primary" onClick={() => props.searchCallback()}>
            搜索
          </Button>
        </Col>
      </Row>
    </Form>
  );
});
export default CoderForm;
